<template>
  <div class="song-list">
    <div class="songTop">
      <h3>最新音乐</h3>
    </div>
    <ul class="songList-ul">
      <li v-for="i in songsArr" :key="i.id" class="item" @click="showNormalPlayer(i.id)">
        <img v-lazy="i.picUrl" alt />
        <div>
          <h3>{{ i.name }}</h3>
          <p>{{ i.song.artists[0].name }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    songsArr: {
      type: Array,
      default: () => [],
      require: true
    }
  },
  methods: {
    ...mapActions(['setFullScreen', 'setSongDetail']),
    // 显示播放页面
    showNormalPlayer (id) {
      this.setFullScreen(true)
      this.setSongDetail([id])
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
@import "@/assets/css/variable.scss";
.songTop {
  width: 100%;
  height: 84px;
  @include bg_sub_color();
  border-bottom: 1px solid #ccc;
  padding: 0 20px;
  h3 {
    line-height: 84px;
    @include font_size($font_large);
    @include font_color();
  }
}
.songList-ul {
  width: 100%;
  .item {
    width: 100%;
    display: flex;
    align-items: center;
    height: 150px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    @include bg_sub_color();
    img {
      width: 100px;
      height: 100px;
      border-radius: 20px;
      margin-right: 20px;
    }
    h3 {
      @include font_size($font_large);
      @include font_color();
    }
    p {
      margin-top: 20px;
      @include font_size($font_samll);
      @include font_color();
      opacity: 0.78;
    }
  }
}
</style>
